<!--
 * @Author: vectorwings
 * @Email: vectorwings@163.com
 * @GitHub: https://github.com/vector-wings/
 * @Company: Copyright 2019 HuaZhuTech, Inc.
 * @Date: 2019-10-26 13:51:41
 * @LastEditors: vectorwings
 * @LastEditTime: 2019-10-26 17:10:02
 * @Description: 审批工作-详情-延期申请
 -->

<template>
  <section class="card">
		<div>原始整改期限：{{endTime}}</div>
		<hr>
		<div>延期整改期限：缺少字段</div>
		<hr>
		<div class="section">申请人：<avatar-name :name="applyUserName"></avatar-name></div>
		<hr>
		<div>申请时间：{{applyTime}}</div>
		<div style="margin-top: 0.2rem;">
			<mt-button type="default" size="large" @click="handleBtnClick(0)">拒绝</mt-button>
			<span style="width: 0.1rem;"></span>
			<mt-button type="primary" size="large" @click="handleBtnClick(1)">同意</mt-button>
		</div>
	</section>
</template>

<script>
import { AvatarName } from '../../../../components/widgets'
export default {
	name: 'delay-apply-card',
	components: {
		AvatarName
	},
	props: {
		endTime: String,
		applyUserName: String,
		applyTime: String
	},
	methods: {
		handleBtnClick (tag) {
			this.$emit('apply', tag);
		}
	}
}
</script>

<style lang="scss" scoped>
	.card {
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
		padding: 0.14rem;

		section {
			height: 0.4rem;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
		}

		div {
			height: 0.4rem;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			font-size: 0.14rem;
			color: #222222;
		}

		hr {
			margin: 0;
			width: 100%;
			height: 0.01rem;
			border: 0;
			background-color: #efefef;
		}
	}
</style>
